<div class="day" id="bili-n" style="width:50px;height: 50px;">
    <span><svg version="1.1" id="sunGlobe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <g id="sunrays">
            <radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"></path>
            <radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"></path>
            <radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"></path>
            <radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"></path>
            
                <radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789" gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"></path>
            <radialGradient id="XMLID_16_" cx="30.5864" cy="70.2252" r="6.0153" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_9_" fill="url(#XMLID_16_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M29.3,64.3l7.3,6.3c0,0-3.1,5.4-4.8,5.6s-7.4-5-7.3-6.3C24.6,68.6,29.3,64.3,29.3,64.3z"></path>
            <radialGradient id="XMLID_44_" cx="21.0871" cy="50" r="4.8093" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_10_" fill="url(#XMLID_44_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M24.8,44.8l0.6,9.6c0,0-6,1.5-7.4,0.5c-1.4-1.1-1.5-8.8-0.6-9.6C18.3,44.4,24.8,44.8,24.8,44.8z"></path>
            <radialGradient id="XMLID_45_" cx="29.9614" cy="29.0073" r="6.019" gradientUnits="userSpaceOnUse">
                <stop offset="0.3333" style="stop-color:#FBD25A"></stop>
                <stop offset="0.7581" style="stop-color:#FAD45D"></stop>
                <stop offset="1" style="stop-color:#F5E16E"></stop>
            </radialGradient>
            
                <path id="XMLID_11_" fill="url(#XMLID_45_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
                M36,28.6L28.7,35c0,0-4.9-3.8-4.9-5.6c0-1.7,6.1-6.6,7.3-6.3C32.4,23.3,36,28.6,36,28.6z"></path>
        </g>
        <radialGradient id="XMLID_46_" cx="50" cy="49.1667" r="26.8776" gradientUnits="userSpaceOnUse">
            <stop offset="0.3333" style="stop-color:#E3BF4C"></stop>
            <stop offset="0.7473" style="stop-color:#F4CE52"></stop>
            <stop offset="1" style="stop-color:#F5E16E"></stop>
        </radialGradient>
        <ellipse id="XMLID_1_" fill="url(#XMLID_46_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3" ry="26.5"></ellipse>
        </svg></span>
</div>
<div class="night" id="bili-n" style="width:50px;height: 50px;">
    <span><svg version="1.1" id="sunGlobe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <radialGradient id="chubbyMoon_1_" cx="61.5" cy="38.1667" r="71.3092" gradientUnits="userSpaceOnUse">
            <stop offset="0.4082" style="stop-color:#D3D0B2"></stop>
            <stop offset="0.42" style="stop-color:#C5C4A0"></stop>
        </radialGradient>
        <ellipse id="chubbyMoon" fill="url(#chubbyMoon_1_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3" ry="26.5"></ellipse>
        <radialGradient id="mooncrater_2_" cx="213.1896" cy="228.9649" r="71.3092" gradientTransform="matrix(0.2761 0 0 0.2761 -4.5736 -17.9305)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater" fill="url(#mooncrater_2_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="51.1" cy="48.3" rx="7.5" ry="7.3"></ellipse>
        <radialGradient id="mooncrater_4_" cx="193.2701" cy="181.016" r="71.3092" gradientTransform="matrix(7.215338e-002 0 0 7.215340e-002 25.6009 15.7241)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater_1_" fill="url(#mooncrater_4_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="38.7" cy="29.6" rx="2" ry="1.9"></ellipse>
        <radialGradient id="mooncrater_6_" cx="374.2563" cy="167.1567" r="71.3092" gradientTransform="matrix(0.1198 0 0 0.1198 13.506 8.4935)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater_3_" fill="url(#mooncrater_6_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="57" cy="29.8" rx="3.3" ry="3.2"></ellipse>
        <radialGradient id="mooncrater_14_" cx="463.2536" cy="274.3521" r="71.3092" gradientTransform="matrix(0.1405 0 0 0.1405 6.587 5.366)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater_5_" fill="url(#mooncrater_14_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="70" cy="45.4" rx="3.8" ry="3.7"></ellipse>
        <radialGradient id="mooncrater_15_" cx="179.6487" cy="280.2852" r="71.3092" gradientTransform="matrix(0.1712 0 0 0.1712 2.2486 -2.7871)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater_8_" fill="url(#mooncrater_15_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="31" cy="47.1" rx="4.7" ry="4.5"></ellipse>
        <radialGradient id="mooncrater_16_" cx="229.7374" cy="376.3218" r="71.3092" gradientTransform="matrix(0.1135 0 0 0.1135 12.8171 17.5574)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater_9_" fill="url(#mooncrater_16_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="37.6" cy="61.5" rx="3.1" ry="3"></ellipse>
        <radialGradient id="mooncrater_17_" cx="415.0933" cy="434.7574" r="71.3092" gradientTransform="matrix(0.1135 0 0 0.1135 12.8171 17.5574)" gradientUnits="userSpaceOnUse">
            <stop offset="0.385" style="stop-color:#C2B99D"></stop>
            <stop offset="0.4082" style="stop-color:#B5AA86"></stop>
        </radialGradient>
        <ellipse id="mooncrater_11_" fill="url(#mooncrater_17_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="58.6" cy="68.2" rx="3.1" ry="3"></ellipse>
        </svg></span>
</div>